<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<title>导航和轮播</title>

<!-- 猫耳朵效果 -->
<script type="text/javascript">
/**
 * 显示产品列表函数
 */
function showProductsAsideCategorys(cid){
	//$("div.eachCategory[cid="+cid+"]").css("background-color","white");
	$("div.productsAsideCategorys[cid="+cid+"]").show();
}
/**
 * 隐藏产品列表函数
 */
function hideProductsAsideCategorys(cid){
	$("div.productsAsideCategorys[cid="+cid+"]").hide();
}

$(function(){
	$("div.eachCategory").mouseenter(function(){ //鼠标移入菜单项时，显示对应的产品列表
		var cid = $(this).attr("cid");
		$(this).css("background","white");
		showProductsAsideCategorys(cid); //显示产品列表函数
	});
	$("div.eachCategory").mouseleave(function(){ //鼠标移出菜单项时，隐藏对应的产品列表
		var cid = $(this).attr("cid");
		$(this).css("background","");
		hideProductsAsideCategorys(cid);//隐藏产品列表函数
	});
	$("div.productsAsideCategorys").mouseenter(function(){ //鼠标移入菜单项时，显示对应的产品列表
		var cid = $(this).attr("cid");
		$("div.eachCategory[cid="+cid+"]").css("background","white");
		showProductsAsideCategorys(cid);//显示产品列表函数
	});
	$("div.productsAsideCategorys").mouseleave(function(){ //鼠标移出菜单项时，隐藏对应的产品列表
		var cid = $(this).attr("cid");
		$("div.eachCategory[cid="+cid+"]").css("background","");
		hideProductsAsideCategorys(cid);//隐藏产品列表函数
	});
});

$(function(){
	
	$("div.rightMenu span").mouseenter(function(){ //当鼠标进入样式为rightMenu的div中的span元素时，执行function
		var left = $(this).position().left;    //获取span元素距离左边的第一个元素的距离
		var top = $(this).position().top;
		var width = $(this).css("width");
		var destLeft = parseInt(left) + parseInt(width)/2;
		$("img#catear").css("left",destLeft);
		$("img#catear").css("top",top-20);
		$("img#catear").fadeIn(300);
	});
	$("div.rightMenu span").mouseleave(function(){  //猫耳朵隐藏
		$("img#catear").hide();
	});

});
	
</script>
	<div class="categoryWithCarousel">
	<img class="catear" id="catear" src="./img/site/catear.png"  />
		<div class="headbar">
			<div class="head">
				<span class="glyphicon glyphicon-th-list" style="margin-left: 10px"></span>
				<span style="margin-left: 10px">商品分类</span>
	
			</div>
	
			<div class="rightMenu">
				<span><a href="#"><img src="./img/site/chaoshi.png" /></a></span> 
				<span><a href="#"><img src="./img/site/guoji.png" /></a></span> 
				<c:forEach items="${categories}" var="c" varStatus="st">
					<c:if test="${st.count<=4}">
						<span><a href="forecategory?category.id=${c.id}">${c.name}</a></span>
					</c:if>
				</c:forEach>
			</div>
		</div>
	
	
		<!-- 左侧隐藏菜单 -->
		
			<%@include file="categoryMenu.jsp" %>
		
		
		
			<%@include file="productsAsideCategorys.jsp" %>
		

		<%@include file="carousel.jsp" %>
		<!-- 这里设置背景色与轮播图片背景色一样，也是美工效果 -->
		<div class="carouselBackgroundDiv"></div>

	</div>

</html>